<template>
  <div class="topic">
    <tabs :defaultActiveKey="defaultActiveKey" @callback="updateKey" class="tabs">
      <tab :label="title[index]" :index="(index+1).toString()" v-for="(item,index) in djArr" :key="index">
        <router-link :to="`/radio/${dj.id}`" tag="div" class="content" v-for="(dj,ind) in item.data.djRadios" :key="ind">
<!--          <router-link :to="`/radio/${dj.id}`" tag="div">-->
            <img :src="dj.picUrl" alt="">
          <div class="left">
            <p>{{ dj.desc }}</p>
            <p>{{ dj.name }}</p>
          </div>
        </router-link>
      </tab>
    </tabs>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      defaultActiveKey: '1',
      djArr: [],
      title: ['音乐推荐', '情感', '明星专区']
    }
  },
  methods: {
    updateKey (index) {
      this.defaultActiveKey = index
    }
  },
  mounted () {
    function getDJ2 () {
      return axios.get('dj/recommend/type?type=2')
    }
    function getDJ3 () {
      return axios.get('dj/recommend/type?type=3')
    }
    function getDJ4 () {
      return axios.get('dj/recommend/type?type=14')
    }

    Promise.all([getDJ2(), getDJ3(), getDJ4()]).then(axios.spread((dj2, dj3, dj4) => {
      // console.log(dj2,dj3,dj4)
      this.djArr.push(dj2, dj3, dj4)
    }))
  }
}
</script>

<style lang="less" scoped>
.topic{
  .tabs{
    background-color: #fff;
    margin: 0px 20px;
    .content{
      display: flex;
      padding: 35px 35px;
      background-color: #fff;
      cursor: pointer;
      img{
        width: 100px;
      }
      p{
        margin:20px 10px;
      }
    }
  }
}
</style>
